@import "../../../source/core/classes";
.main {
	width: 100%;
	overflow: hidden;
	.category-tab {
		font-size: 30rpx;
		background: #f5f5f5;
		overflow: hidden;
		width: 100%;
		z-index: 1;
		padding: 0 5rpx;
		.category-tab-inner{
			padding-bottom: 2rpx;
			overflow: hidden;
		}
		.category-item{
			height: 88rpx;
			line-height: 88rpx;
			font-size: 30rpx;
			text-align: center;
			margin: 0 10rpx;
			width: 90rpx;
			box-sizing: border-box;
			float: left;
			&.active{
				border-bottom: solid 2px #d33e3b;
			}
		}
	}
	.video-list {
		width: 100%;
		overflow: hidden;
		.video-cell {
			width: 100%;
			overflow: hidden;
			background-color: #f5f5f5;
			border-bottom: solid 1px #e0e0e0;
			padding-bottom: 15rpx;
			.video-preview {
				position: relative;
				.video-preview-title {
					position: absolute;
					padding: 10rpx 20rpx 30rpx 20rpx;
					left: 0;
					right: 0;
					top: 0;
					font-size: 32rpx;
					background: linear-gradient(rgba(0, 0, 0, .8),  rgba(0, 0, 0, 0));
					background: -webkit-linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
					color: #fff;
					.subtitle{
						//font-size: 24rpx;
						color: rgba(256,256,256,.8);
						margin-left: 6rpx;
					}
				}
				.video-preview-image {
					width: 100%;
					height: 56vw;
					display: block;
				}
				.video-preview-play{
					width: 108rpx;
					height: 108rpx;
					line-height: 108rpx;
					border-radius: 999rpx;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					background-color: rgba(0,0,0,.6);
					.img-icon{
						width: 48rpx;
						height: 48rpx;
						margin-left: 10rpx;
					}
				}
				.video-time{
					position: absolute;
					right: 20rpx;
					bottom: 15rpx;
					padding: 4rpx 20rpx;
					border-radius: 99rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					background-color: rgba(0,0,0,.5);
					.subtitle{
						font-size: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
			.video-info{
				@include flexbox;
				@include align-items(center);
				height: 90rpx;
				padding: 0 20rpx;
				font-size: 26rpx;
				background-color: #fff;
				.upload-user-avatar{
					margin-right: 20rpx;
					image{
						width: 70rpx;
						height: 70rpx;
						border-radius: 999rpx;
						display: block;
					}
				}
				.upload-user-nickname{
					font-size: 28rpx;
					@include flex(1);
				}
				.video-like-count{
					margin: 0 10rpx;
					text-align: right;
					color: #9e9e9e;
					font-size: 28rpx;
				}
				.like-icon{
					padding-left: 10rpx;
				}
			}
		}
	}
	.back{
		position: fixed;
		right: 8%;
		bottom: 15%;
		width: 80rpx;
		height: 80rpx;
		padding: 10rpx;
		text-align: center;
		font-size: 20rpx;
		border-radius: 999rpx;
		background-color: rgba(0,0,0,.5);
		color: #f5f5f5;
		z-index: 99;
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-delay: 0.5s;
		animation-delay: 0.5s;
		image{
			display: block;
			margin: 4rpx auto;
		}
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}